<template>
  <div class="editorBox">
    <quilleditor
      v-model="content"
      ref="myTextEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @ready="onEditorReady($event)"
      @change="onEditorChange($event)"
    >
    </quilleditor>
  </div>
</template>
 <script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

import { quillEditor } from "vue-quill-editor";
const toolbarOptions = [
  ["bold", "italic"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  [{ header: 1 }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
  ["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  ["link", "image"], // 链接、图片、视频-----['link', 'image', 'video']
];

export default {
  name: "MyEditor",
  props: {
    value: {
      type: String,
    },
    /* 上传图片的地址 */
    uploadUrl: {
      type: String,
      default: "/",
    },
    /* 上传图片的file控件name */
    fileName: {
      type: String,
      default: "file",
    },
    maxUploadSize: {
      type: Number,
      default: 1024 * 1024 * 1024 * 500,
    },
    
    options: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      content: "",
      editorOption: {
        modules: {
          toolbar: toolbarOptions,
        },
        placeholder: this.options.placeholder,
      },
   
      client: null,
    };
  },
  methods: {
    // 准备编辑器
    onEditorReady(editor) {
      console.log(editor)
    },
    // 失去焦点事件
    onEditorBlur() {},
    // 获得焦点事件
    onEditorFocus() {},
    // 内容改变事件
    onEditorChange() {
      console.log(this.content)
    },

    /* 选择上传图片切换 */
    onFileChange(e) {
      this.$emit("fileChange", e, this);
    },
    /* 点击上传图片按钮 */
    imgClick() {
      /* if (!this.uploadUrl) {
        console.log('no editor uploadUrl')
        return
      } */
      /* 内存创建input file */
      var input = document.createElement("input");
      input.type = "file";
      input.name = this.fileName;
      input.accept = "image/jpeg, image/png, image/jpg, image/gif";
      input.onchange = this.onFileChange;

      console.log("图片按钮点击", input);

      input.click();
    },
  },
  computed: {
    editor() {
      return this.$refs.myTextEditor.quill;
    },
  },
  components: {
    quilleditor: quillEditor,
  },

  watch: {
    value(newVal, oldVal) {
      if (this.editor) {
        if (newVal !== this.content) {
          this.content = newVal;
        }
      }
    },
  },
};
</script>
<style lang="scss">
.editorBox {
  width: 100%;
  height: 100%;
}
.ql-toolbar button {
  height: 2.4rem;
}
.ql-toolbar button:hover {
  background-color: rgba(0, 132, 255, 0.1);
}
.ql-editor {
  min-height: 2rem;
}

.ql-toolbar > span:first-child {
  margin-right: 0 !important;
}
.ql-formats button {
  position: relative;
}
.ql-formats button:hover::after,
.ql-formats > span:hover::after {
  z-index: 5;
  position: absolute;
  padding: 0 1rem;
  line-height: 2.5rem;
  white-space: nowrap;
  background-color: black;
  color: #fff;
  border-radius: 0.2rem;
  top: 3.61rem;
  left: 50%;
  transform: translateX(-50%);
}
.ql-formats button:hover::before,
.ql-formats > span:hover::before {
  content: "";
  width: 0;
  height: 0;
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent black transparent;
  position: absolute;
  top: 2.4rem;
  left: 50%;
  transform: translateX(-50%);
}

.ql-bold:hover::after {
  content: "粗体";
}
.ql-italic:hover::after {
  content: "斜体";
}

.ql-header:hover::after {
  content: "一级标题";
}

.ql-list:first-child:hover:after {
  content: "有序列表";
}
.ql-list:nth-child(2):hover::after {
  content: "无序列表";
}

.ql-code-block:hover::after {
  content: "代码块";
}

.ql-blockquote:hover::after {
  content: "引用块";
}

.ql-link:hover::after {
  content: "插入链接";
}
.ql-image:hover::after {
  content: "上传图片";
}
.ql-container.ql-snow {
  border: 0;
}
.ql-editor {
  font-size: 1.6rem;
}
</style>
